<!--  -->
<template>
  <div class="notice-board">
    <span class="half-width"
          @mouseover="showNotices('学院公告')">
          学院公告
    </span>
    <ul class="notice-list">
      <li v-for="(item, index) in currentNotices"
          :key="index">
        <span>{{ index + 1 }}.</span> {{ item }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data () {
    return {
      currentCategory: '学院公告',
      noticeItems: [
        '机械工程学院2023年职业教育活动周 学生技能节获奖学生公示',
        '机械工程学院关于公布第十四届创业大赛结果的 通知',
        '机械工程学院2022-2023第二学期耗材招标公告',
        '《基于机器学习的轻量级体适能训练评估系统》技术开发 招标公告',
        '惠教泽学，深耕细作——机械工程学院中青年教师教学能力展示',
        '中德双元培养：机械工程学院2022级中德班顺利组班',
        '2023创新创业大楼11楼装修配套设备建设项目（其三）招标公告'
      ],
    }
  },
  computed: {
    currentNotices () {
      if (this.currentCategory === '学院公告') {
        return this.noticeItems
      }
    }
  },
  methods: {
    showNotices (category) {
      this.currentCategory = category
    }
  }
}
</script>

<style  scoped>
.notice-board {
  width: 15.3%;
  max-width: 800px;
  border: solid 1px #dcdcdc;
  padding: 20px;
}
.notice-board span:hover{
  background-color: #26e998;
}
.half-width {
  width: 100%;
  display: inline-block;
  font-size: 25px;
  margin-bottom: 10px;
  border-bottom: 1px solid #dcdcdc;
  color: #4381E6;
  text-align: center;
  cursor: pointer;
}
.notice-list {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
.notice-list li {
  margin-top: 5px;
  margin-bottom: 10px;
  padding: 10px;
  background-color: #fff;
  color: rgb(133, 129, 129);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: flex;
  cursor: pointer;
}
.notice-list li:hover {
  background-color: #4381E6;
  color: #fff;
}
.notice-list li span:first-child {
  width: 30px;
  text-align: right;
  margin-right: 10px;
}

</style>
